<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <style>
        table th {
            padding: 10px;
        }
        table td {
            padding: 10px 20px;
        }
    </style>

    <script src="/js/jquery.min.js"></script>
    <script>
        //修改课程状态
        function updateCourse(stat, cid) {
            //ajax
            $.ajax({
                type: "POST",
                url: "/course/updateStatus",
                data: {
                    status: stat,
                    id: cid
                }, success: function(data){
                    if(data.result){
                        //刷新页面
                        location.reload();
                    } else {
                        alert("修改失败！");
                    }
                },
                dataType: "json"
            });
        }
    </script>
</head>
<body>
    <h1>课程列表</h1>

    <hr/>
    <button onclick="javascript:location.href='/course/toinsert'">新增学生</button>
    <br/>
    <table border="1">
        <tr>
            <th>课程编号</th>
            <th>课程名称</th>
            <th>课程封面</th>
            <th>最大人数</th>
            <th>剩余座位</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr th:each="c : ${courselist}">
            <td th:text="${c.id}">1</td>
            <td th:text="${c.courseName}">Java核心技术</td>
            <td>
                <!-- 等于null 就展示默认图片 -->
                <img th:if="${c.fengmian == null}" src="/img/default.jpg" style="width: 150px; height: 100px"/>
                <!-- 不等于null 就展示设置的图片 -->
                <img th:unless="${c.fengmian == null}" th:src="@{/course/getfengmian?fengmian={fm}(fm=${c.fengmian})}" style="width: 150px; height: 100px"/>
            </td>
            <td th:text="${c.maxNumber}">100</td>
            <td th:text="${c.hasNumber}">50</td>
            <td th:if="${c.status==0}">未开启选课</td>
            <td th:if="${c.status==1}">已开启选课</td>
            <td>
                <button th:if="${c.status==0}" th:onclick="'updateCourse(1,' + ${c.id} + ')'">开启选课</button>
                <button th:if="${c.status==1}" th:onclick="'updateCourse(0,' + ${c.id} + ')'">关闭选课</button>
            </td>
        </tr>
    </table>

</body>
</html>